<div class="header">
    <nav class="nav_bar">
        <ul>
            <!-- left header -->
            <li
                class="li_left">
                <!-- home -->
                {% if page.home_btn != false %}
                    <a class="header_btn" href="{{ site.url }}{{ site.baseurl }}">
                        <i class="fa fa-home">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Home</p>
                            {% endif %}
                        </i>
                    </a>
                {% endif %}
                <!-- email -->
                {% if site.email != ""%}
                    <a class="header_btn" href="mailto://{{ site.email }}">
                        <i class="fa fa-envelope-square">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Email</p>
                            {% endif %}
                        </i>
                    </a>
                {% endif %}
                <!-- github -->
                {% if site.github != "" %}
                    <a class="header_btn" href="https://github.com/{{ site.github }}">
                        <i class="fa fa-github">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Github</p>
                            {% endif %}
                        </i>
                    </a>
                {% endif %}
                <!-- maximize -->
                {% if page.maximize != false %}
                    <a class="header_btn" id="mxmz_btn" onclick="toggle_maximize()">
                        <i class="fa fa-window-maximize">
                            {% if page.btn_text != false %}
                                <p class="btn_text" id="mxmz_text">Maximize</p>
                            {% endif %}
                        </i>
                    </a>
                {% endif %}
                <!-- access token -->
                {% if page.encrypted_text == true %}
                    <a class="header_btn" id="acs_btn" onclick="apply_token()">
                        <i class="fa fa-key">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Token</p>
                            {% endif %}
                        </i>
                    </a>
                    <textarea class="access_token" cols="8" id="acs_tkn" rows="1"></textarea>
                {% endif %}
            </li>
            <!-- right header -->
            <span
                class="span_right">
                <!-- popup table of content -->
                {% if page.toc != false %}
                    <a class="header_btn" onclick="scroll_percentage(-0.88)">
                        <i class="fa fa-backward">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Prev</p>
                            {% endif %}
                        </i>
                    </a>
                    <!-- scroll down -->
                    <a class="header_btn" onclick="scroll_percentage(0.88)">
                        <i class="fa fa-forward">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Next</p>
                            {% endif %}
                        </i>
                    </a>
                    <!-- popup table of content -->
                    <a class="header_btn popup_btn" onclick="toggle_toc()">
                        <i class="fa fa-bars">
                            {% if page.btn_text != false %}
                                <p class="btn_text">Content</p>
                            {% endif %}
                        </i>
                    </a>
                {% else site.title %}
                    <a class="title">{{ site.title }}</a>
                    {% if site.owner != ""%}
                        <a class="owner">
                            -
                            {{ site.owner }}</a>
                    {% endif %}
                {% endif %}
            </span>
        </ul>
    </nav>
    <hr/>
</div>
<!-- table of content -->
{% if page.toc != false %}
    <div class="div_toc toc" id="popup_toc">
    {% if page.toc_level %}
        {% assign toclv = page.toc_level %}
        {% elsif  site.toc_level %}
        {% assign toclv = site.toc_level %}
        {% else %} 
        {% assign toclv = 3 %}
    {% endif %}
    <!-- generate toc -->
    {% include toc.html html=page sanitize=true class="ul_toc" id="ul_toc" h_min=1 h_max=toclv %}
    </div>
    <!-- toggle toc -->
    <script>
    function toggle_toc() {
        var popup = document.getElementById("popup_toc");
        popup.classList.toggle("show");
    }
    </script>
    <!-- scroll page -->
        <script>
    function scroll_percentage(mtpler) {
        document
        .getElementById("div_atcl")
        .scrollBy(0, window.innerHeight * mtpler);
    }
    </script>
{% endif %}
<!-- toggle maximize -->
{% if page.maximize != false %}
<script>
  var ctner_state = 0;
  var ctner = document.getElementById("ctner");
  function toggle_maximize() {
    if (ctner_state == 0) {
      ctner.style.width = "100%";
      ctner.style.height = "100%";
      ctner.style.top = "0";
      ctner.style.maxWidth = "100%";
      if (document.getElementById("mxmz_text")) {
        document.getElementById("mxmz_text").innerHTML = "Restore";
      }
      ctner_state = 1;
    } else if (ctner_state == 1) {
      ctner.style.width = "84%";
      ctner.style.height = "97%";
      ctner.style.top = "2%";
      ctner.style.maxWidth = "1240px";
      if (document.getElementById("mxmz_text")) {
        document.getElementById("mxmz_text").innerHTML = "Maximize";
      }
      ctner_state = 0;
    }
  }
</script>
{% endif %}
<!-- encrypt and decrypt -->
{% if page.encrypted_text == true %}
    <script src="{{ site.url }}{{ site.baseurl }}{{ site.assets_path }}/js/sjcl.js" async></script>
    <script>
  function decrypt_all(pwd, class_name) {
    var elem_clct = document.getElementsByClassName(class_name);
    if (elem_clct.length == 0) {
      console.log("No texts to decrypt!");
      return false;
    }
    for (acc = 0; acc < elem_clct.length; acc++) {
      var encrypted = elem_clct[acc].id;
      var ct =
        '{"iv":"' +
        encrypted.substring(0, 22) +
        '==",salt:"","ct":"' +
        encrypted.substring(22) +
        '"}';
      try {
        var txt = sjcl.json.decrypt(pwd, ct);
      } catch (e) {
        alert("Invalid Access Token!");
        return;
      }
      elem_clct[acc].innerHTML = txt;
    }
    return true;
  }
  function apply_token() {
    var tkn = document.getElementById("acs_tkn");
    if (decrypt_all(tkn.value, "encrypted")) {
      tkn.style.display = "none";
      document.getElementById("acs_btn").style.display = "none";
    }
  }
</script>
{% endif %}
